<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .redBg{
            background: red;
        }
    </style>
</head>
<body>
<div id="app"></div>
<!--react的核心库-->
<script type="text/javascript" src="../utils/react.development.js"></script>
<!--react的扩展库，专门用于操作DOM-->
<script type="text/javascript" src="../utils/react-dom.development.js"></script>
<!--引入babel，用于解析jsx语法为原生js语法-->
<script type="text/javascript" src="../utils/babel.min.js"></script>

<script type="text/babel">
    // 父子组件渲染从外到里再从里到外
    class MyComponent extends React.Component{
        state={count:1}

        //will相关的后续版本会有变更 后期这三个使用需要加上UNSAFE_
        componentWillMount(){
            console.log('组件即将挂载')
        }
        componentWillUpdate(){
            console.log('组件即将更新')
        }
        componentWillReceiveProps(){
            console.log('父组件传值更改触发')
        }
        //初始化相关
        componentDidMount(){
            console.log('组件挂载了')
        }
        componentWillUnmount(){
            console.log('组件将会销毁',this.state.count)
        }
        shouldComponentUpdate(){
            console.log('控制组件是否能更新')
            return true
        }
         componentDidUpdate(){
             console.log('组件更新了')
         }
        addCount=()=>{
            const {count}=this.state
            this.setState({count:count+1})
        }
         //手动销毁实例
        doUnMount=()=>{
           ReactDOM.unmountComponentAtNode(document.querySelector('#app'))
        }
        forceUpdate=()=>{
            console.log('强制更新')
            this.forceUpdate()
        }
        render(){
            console.log('render')
            return(
                <div>
                    <span>count:{this.state.count}</span>
                    <button onClick={this.doUnMount}>手动销毁组件</button>
                   <button onClick={this.addCount}>点我更改状态</button>
                    <button onClick={this.forceUpdate}>强制更新</button>
                </div>
            )
        }
    }
    class MyComponentParent extends React.Component{
        constructor(props) {
            super(props);
            this.state={parentInfo:'parentInfo'}
        }
        //will相关的后续版本会有变更
        componentWillMount(){
            console.log('parent,组件即将挂载')
        }
        componentWillUpdate(){
            console.log('parent,组件即将更新')
        }
        componentWillReceiveProps(){
            console.log('parent,父组件传值更改触发')
        }
        //初始化相关
        componentDidMount(){
            console.log('parent,组件挂载了')
        }
        componentWillUnmount(){
            console.log('parent,组件将会销毁',this.state.count)
        }
        shouldComponentUpdate(){
            console.log('parent,控制组件是否能更新')
            return true
        }
        componentDidUpdate(){
            console.log('parent,组件更新了')
        }
        changeParentProps=()=>{
            this.setState({parentInfo:this.state.parentInfo+'改变了'})
        }
        render(){
           return(
               <div>
                   父组件<br/>
                   <button onClick={this.changeParentProps}>更改父级组件数据 测试</button><br/>
                   子组件<br/>
                   <MyComponent {...this.state}/>
               </div>
           )
       }
    }
    ReactDOM.render(<MyComponentParent/>,document.querySelector('#app'))
</script>
</body>
</html>
